<template>
    <a-spin :spinning="spinning" :tip="'加载中'">
        <div class="body">
            <div class="loginBox">
                <h2>login</h2>
                <div class="item">
                    <input v-model="userLogin.mobile" type="text" required>
                    <label for="">手机号</label>
                </div>
                <div class="item">
                    <input v-model="userLogin.password" type="password" required>
                    <label for="">密码</label>
                </div>
                <div class="item_btn">
                    <button @click="handleLogin" class="btn">
                        登录
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                    <button @click="handleRegister" class="btn">
                        注册
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <!--                <div class="forget_password">忘记密码？</div>-->
            </div>
        </div>
    </a-spin>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {login} from '@/api/login'
import {message} from "ant-design-vue";
import {UserLogin} from '@/model/loginAndRegister'
import router from "@/router";
import {useStore} from '@/store'
import {getUserInfo} from "@/api/home";
// @ts-ignore
import cookie from 'js-cookie'
import lodash from "lodash";

//是否显示加载中
const spinning = ref<boolean>(false);

//登录需要的参数
const userLogin = ref<UserLogin>({
    mobile: '',
    password: '',
})

//登录
//throttle: 节流
const handleLogin = lodash.throttle(() => {
    //手机号正则校验
    const reg = /^1[3-9]\d{9}$/
    if (userLogin.value.mobile == '') {
        message.warn("手机号不能为空！")
    } else if (userLogin.value.password == '') {
        message.warn("密码不能为空！")
    } else if (!reg.test(userLogin.value.mobile)) {
        message.error("手机号格式不对")
    } else {
        login(userLogin.value).then((res: any) => {
            if (res.data?.code == 200) {
                const store = useStore()
                store.setToken(res.data.data.token)
                getUser(res.data.data.token)
                //懒加载
                spinning.value = true
                setTimeout(() => {
                    message.success("登录成功")
                    spinning.value = false
                    router.push("/")
                }, 1000)
            } else {
                message.error(res.data.message)
            }
        })
    }
}, 2000)

//获取用户信息
const getUser = (token: string) => {
    if (token != null) {
        getUserInfo().then((res) => {
            if (res.data.code === 400) {
                alert("登录过期，请重新登录!")
                cookie.remove("token")
                cookie.remove("userinfo")
                router.push("/login")
            }
            //将用户信息存到cookie中
            cookie.set("userinfo", JSON.stringify(res.data.data.user))
        })
    } else {
        console.info("token不存在!")
    }
}

//跳转注册页面
const handleRegister = () => {
    router.push("/register")
}
</script>

<style lang="less" scoped>
input,
button {
  background: transparent;
  border: 0;
  outline: none;
}

.body {
  height: 100vh;
  background: linear-gradient(#141e30, #243b55);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #03e9f4;

  .loginBox {
    width: 400px;
    height: 364px;
    background-color: #0c1622;
    margin: 100px auto;
    border-radius: 10px;
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
    padding: 40px;
    box-sizing: border-box;

    h2 {
      text-align: center;
      color: aliceblue;
      margin-bottom: 30px;
      font-family: 'Courier New', Courier, monospace;
    }

    .item {
      height: 45px;
      border-bottom: 1px solid #fff;
      margin-bottom: 40px;
      position: relative;
    }

    .item input {
      width: 100%;
      height: 100%;
      color: #fff;
      padding-top: 20px;
      box-sizing: border-box;
    }

    .item input:focus + label,
    .item input:valid + label {
      top: 0;
      font-size: 2px;
    }

    .item label {
      position: absolute;
      left: 0;
      top: 12px;
      transition: all 0.5s linear;
    }

    .forget_password {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
      color: #939297;
    }

    .forget_password:hover {
      color: red;
    }

    .item_btn {
      text-align: center;

      .btn {
        padding: 10px 20px;
        color: #03e9f4;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0 10px;
      }

      .btn:hover {
        border-radius: 5px;
        color: #fff;
        background: #03e9f4;
        box-shadow: 0 0 5px 0 #03e9f4,
        0 0 25px 0 #03e9f4,
        0 0 50px 0 #03e9f4,
        0 0 100px 0 #03e9f4;
        transition: all 1s linear;
      }

      .btn > span {
        position: absolute;
      }

      .btn > span:nth-child(1) {
        width: 100%;
        height: 2px;
        background: -webkit-linear-gradient(left, transparent, #03e9f4);
        left: -100%;
        top: 0;
        animation: line1 1s linear infinite;
      }

      .btn > span:nth-child(2) {
        width: 2px;
        height: 100%;
        background: -webkit-linear-gradient(top, transparent, #03e9f4);
        right: 0;
        top: -100%;
        animation: line2 1s 0.25s linear infinite;
      }

      .btn > span:nth-child(3) {
        width: 100%;
        height: 2px;
        background: -webkit-linear-gradient(left, #03e9f4, transparent);
        left: 100%;
        bottom: 0;
        animation: line3 1s 0.75s linear infinite;
      }

      .btn > span:nth-child(4) {
        width: 2px;
        height: 100%;
        background: -webkit-linear-gradient(top, transparent, #03e9f4);
        left: 0;
        top: 100%;
        animation: line4 1s 1s linear infinite;
      }
    }
  }
}

@keyframes line1 {
  50%,
  100% {
    left: 100%;
  }
}

@keyframes line2 {
  50%,
  100% {
    top: 100%;
  }
}

@keyframes line3 {
  50%,
  100% {
    left: -100%;
  }
}

@keyframes line4 {
  50%,
  100% {
    top: -100%;
  }
}
</style>